$(function () {
    /* 思路分析：
    1，需要给按钮注册点击事件，点击按钮
       a,需判断用户有输入信息，即值是否为空，如果为空表示非法 */
    init();
    function init() {

        /* 调用代码 */
        renderData();
       /* 注册点击事件 */
        $(".btn").on("tap",function () {
            /* 先获取input里面的值 */
            var txt = $(".searchTxt").val();
            /* 判断值是否为空，$.trim()去掉值左右两边的空格 */
            if(!$.trim(txt)){
                console.log("非法");
                /* 如果是非法的话，停止执行里面的代码 */
                return;
            }
            /* 如果数据不为空了，就可以把点击按钮提交，获取的数据存到本地存储上 */
            /* 把数据存到本地存储中的方法,通过localStorage这个方法，这是一个数组 */
            var ls = localStorage;
            /* console.log(ls);, */
            /* 如果有数据存进来的话，就把json字符串转为对象，如果没有数据的话，就返回一个空数组 */
            var arr = (ls.getItem("letaoHistory") && JSON.parse(ls.getItem("letaoHistory"))) || [];
            /* console.log(arr); */
            /* 如果数据进来，判断是否有出现重复的，有重复代码的就删除掉 ，循环得到数据中的每一项，判断数据中是否有相同的数据*/
            for(var i = 0;i<arr.length;i++){
                var element =arr[i];
                /* 判断数组中是否有相同的数据 */
                if(element==txt){
                    /* 已经存在了，删除数组（索引，删除第几个） */
                    arr.splice(i,1);
                }
            }
            /* 如果没有出现重复的，添加到数组中 */
                arr.unshift(txt);

                /* 把数组存入到本地储存中，转换为json字符串 */
                ls.setItem("letaoHistory", JSON.stringify(arr));
                /* 渲染到页面 */      

                /* 页面跳转 */
               /*  location.href = "./search.html?key=" + txt; */
           
        })

        /*清除所有的历史数据，清空  */
        $(".clearAll").on("tap",function(){
            /* 把本地存储的东西清空掉 */
            localStorage.removeItem("letaoHistory");
        })
        
        /* 删除单个，当点击x的时候，触发，但是我们是动态生成的数据，所以删除的时候，需要使用委托 
        删除的方法给元素添加自定义属性的方法，获取唯一的索引
        我们根据target的方法获取a标签，但是目标跑到span标签上，所以我们需要获取span 的父元素*/
        $(".his_record ul").on("tap",".removeItem",function (e) {
            var spanDom = e.target;

            console.log(spanDom);
            var index = $(spanDom).parent().data("index");
            /* 返回数据的时候，进行渲染 */
            var ls = localStorage;
            var arr = (ls.getItem("letaoHistory") && JSON.parse(ls.getItem("letaoHistory"))) || [];
            /* 根据索引进行删除数据，1 */
            arr.splice(index,1);

            var str = "";
            for (var i = 0; i < arr.length; i++) {
                var element = arr[i];
                str += ' <li> ' + element + ' <a data-index=' + i + ' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a> </li>';
            }
            /* 添加到页面 */
            $(".his_record ul").html(str);

            /* 数组存入本地储存中 */
            ls.setItem("letaoHistory", JSON.stringify(arr));

        })


    }
    function renderData() {
        var ls = localStorage;
        /* console.log(ls);, */
        /* 如果有数据存进来的话，就把json字符串转为对象，如果没有数据的话，就返回一个空数组 */
        var arr = (ls.getItem("letaoHistory") && JSON.parse(ls.getItem("letaoHistory"))) || [];

        /* 把数据保存到本地储存中后，进行渲染页面 ,element我存到本地存储的数据*/
        var str = "";
        for (var i = 0; i < arr.length; i++) {
            var element = arr[i];
            str += ' <li> ' + element + ' <a data-index=' + i + ' class="removeItem mui-pull-right" href="javascript:;"><span class="mui-icon mui-icon-closeempty"></span></a> </li>';
        }
        /* 添加到页面 */
        $(".his_record ul").html(str);

        /* 判断什么时候显示历史数据，什么时候没有,,数组大于0，表示里面有数据 */
        if (arr.length > 0) {
            $(".his_none").hide();
        } else {
            $(".his_record").hide();
        }
    }

})